import React, { ReactElement, useContext, useMemo } from 'react';
import { ScrollView } from 'react-native';

import styles from './style';
import { Store } from '../../reducer';
import CurrentDownload from '../CurrentDownload';
import Finished from '../Finished';
import Empty from '../../../../components/Empty';
import { downloadEmpty } from '../../../../constant/resource';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { downloadingList, finishedList } = state;

  if (downloadingList.length === 0 && finishedList.length === 0) {
    return <Empty icon={downloadEmpty} emptyDesc="还没有下载任务" />;
  }

  return useMemo(
    (): ReactElement => (
      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.content}
      >
        {downloadingList.length > 0 ? <CurrentDownload /> : null}
        {finishedList.map(
          (item): ReactElement => {
            return <Finished {...item} />;
          }
        )}
      </ScrollView>
    ),
    [downloadingList.length, finishedList]
  );
};
